<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>试题管理</title>
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.css"/>
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <link href="../resources/css/laypage.css" rel="stylesheet">
    <!-- Javascript files -->
    <!-- jQuery -->
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/vue/date.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id="app" class="container">
    <div class="col-xs-10" id="right-content" style="width: 550px">
        <div id="question-list">
            <div class="table-controller">

                <form id="searchForm" class="form-inline">
                    <div class="from-group search-form">
                        查询条件：
                        <div class="form-group">
                            <label class="sr-only" for="questionType">请选择分类</label>
                            <select class="form-control" id="questionType">
                                <option value="1">选择题</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field">请选择分类</label>
                            <select class="form-control" id="field">
                                <option value="">请选择题库</option>
                                <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">
                                    {{item.fieldName}}
                                </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="point">详细分类</label>
                            <select class="form-control" id="point">
                                <option value="">请选择知识点</option>
                                <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId">
                                    {{item.pointName}}
                                </option>
                            </select>
                        </div>
                        <input type="text" class="form-control" placeholder="出题人姓名" id="creator"
                               style="width: 100px; float: left;">
                        <input type="text" class="form-control" placeholder="题目" id="questionName"
                               style="width: 100px; float: left; margin-left: 20px">&emsp;&emsp;
                        <button class="btn btn-sm btn-info" type="button" id="btn-search" style="float: left;  margin-left: 20px">
                            <i class="fa fa-search"></i>搜索
                        </button>
                    </div>
                </form>
            </div>
            <table class="table-striped table" align="center">
                <thead>
                <tr>
                    <td>序号</td>
                    <td>题目</td>
                    <td>题库</td>
                    <td>出题人</td>
                    <td style="width:100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                </tr>
                </thead>
                <tbody>
                <tr class="active" v-for="(item,index) in result">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.field.fieldName}}</td>
                    <td>{{item.creator}}</td>
                    <td>
                        <span class="r-update-btn btn-sm btn-info" @click="questionSelect" v-bind:questionId="item.id" v-bind:questionName="item.name">选择</span>
                    </td>
                </tr>
                </tbody>
                <tr align="center">
                    <td colspan="11">
                        <div id="pagenav"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

</body>
</html>
<script>
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });

    var app = new Vue({
        el: "#app",
        data: {
            result: [],
            fieldListresult: [],
            pointListresult: []
        }
    });

    var getQuestionByPage = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/queryQuestion',
            dataType: 'json',
            data: {
                currPage: curr || 1,
                questionName: $("#questionName").val(),
                questionTypeId: $("#questionType").val(),
                fieldId: $("#field").val(),
                pointId: $("#point").val(),
                creator: $("#creator").val()
            },
            success: function (msg) {
                console.log(msg);
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',  //分页容器
                    pages: msg.totalPages, //总页数
                    skin: '#333333',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getQuestionByPage(obj.curr);
                        }
                    }
                });
            }
        });
    };




    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg
            }, error: function () {
             //   alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg
            }, error: function () {
              //  alert("子类分类列表失败")
            }
        })
    }

    $(function () {
        getAllField();
        getPointByField();
        getQuestionByPage();

        $("#btn-search").click(function () {
            getQuestionByPage();
        });




        //父类下拉框
        $("#field").change(function () {
            getPointByField();
            getQuestionByPage();
        })

        //子类下拉框
        $("#point").change(function () {
            getQuestionByPage();
        })


    })
    //点击选择作为为父页面添加复选框事件
    function questionSelect(e) {
        var v = e.target;
        var str = "<span id=question"+$(v).attr('questionId')+"><input type=checkbox checked  title="+$(v).attr('questionName')+" id=questionCheck"+$(v).attr('questionId')+" value="+$(v).attr('questionId')+" name='chooseQuestion'><br/></span>"
        $("#question"+$(v).attr('questionId'), window.parent.document).remove();
        $("#containChooseQuestion", window.parent.document).append(str);
        $("#questionCount",window.parent.document).val($("input[name='chooseQuestion']:checkbox:checked", window.parent.document).length);
        parent.layui.form.render();
        parent.countTotalPoint();
    }



</script>